<%= include ic/header.html %>
<style>
#main{text-align:center;padding:30px 0;}
#content{text-align:left;width:100%;width:1024px;margin:auto;padding:10px;}
#content .title{padding:10px 20px;}

#itemList li{padding:20px 10px 0;text-align:center;font-family:"宋体";}
#itemList li .img{width:80%;margin:0 10% 0;overflow:hidden;}
#itemList li a{color:#1D1D1B}
#itemList li a:hover{text-decoration:underline;}

.Bar{padding:10px 0;}
.Bar a{color:#a1a1a1;padding:0 10px 2px;line-height:1em;}
.Bar a.sp{border:1px solid #a1a1a1;margin:0 10px;}
.Bar a:hover{background:#243D7A;color:#fff;}
.Bar a.c{color:#243D7A;font-weight:800;}
.Bar a.c:hover{background:none;}
.Bar a.sp:hover{border:1px solid #243D7A;}

#paperBar{text-align:center;}
</style>
<div class="am-cf" id="main">
  <div id="content">
    <h1>心愿单</h1>
    <hr/>
    <ul id="itemList" class="am-avg-sm-6 am-cf"></ul>
    <hr/>
    <div class="am-cf Bar" id="paperBar">
      <a class="sp" href="javascript:void(0)">&lt;</a><a class="c" href="javascript:void(0)">1</a><a class="sp" href="javascript:void(0)">&gt;</a>
    </div>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
var $loading = $("#my-modal-loading");
var page=1;
$(function() {
  $(window).resize(function(){
    fixImg();
  });
  getItem();
});

function fixImg(){
  console.log($("#itemList>li .img").first().html());
  $("#itemList>li .img").height($("#itemList>li .img").first().width());
  $("#itemList>li .img").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("a").children("img").width() / $(this).children("a").children("img").height()>1){
      $(this).children("a").children("img").height(w);
      $(this).children("a").children("img").css("width","auto");
    }else{
      $(this).children("a").children("img").width(w);
      $(this).children("a").children("img").css("height","auto");
    }
  });
}

function setPage(int){
  page=int;
  getItem();
}

function getItem(){
  $loading.modal('open');
  $.get("/getcollections", {
    "ajax"		: true,
    page      : page,
  },function(data){
    $loading.modal('close');
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      $("#itemList").html("");
      $("#paperBar").html("");
      var items = data.items;
      var pager = data.pager;
      for(var i=0;i<items.length;i++){
        var html='<li><div class="img">'
            +'<a href="/itemdetail?id='+items[i].id+'">'
            +'<img src="/p?id='+items[i].cover
            +'&w=400&h=400" onload="fixImg()" >'
            +'</a></div><div class="text">'
            +'<a href="/itemdetail?id='+items[i].id+'">'
            +items[i].Brand+'<br/>'+items[i].title
            +'<br/>￥'+items[i].price+'</a></div></li>';
        $("#itemList").append(html);
      }
      //console.dir(data.pager);
      $("#paperBar").append('<a class="sp" onclick="setPage('+pager.firstPage+')" href="javascript:void(0)">&lt;</a>');
      for(var i=0;i<pager.pageArray.length;i++){
        if(pager.pageArray[i]==pager.currentPage){
          $("#paperBar").append('<a class="c" onclick="setPage('+pager.pageArray[i]+')" href="javascript:void(0)">'+pager.pageArray[i]+'</a>');
        }else{
          $("#paperBar").append('<a onclick="setPage('+pager.pageArray[i]+')" href="javascript:void(0)">'+pager.pageArray[i]+'</a>');
        }
      }
      if(pager.pagesize>items.length){
        $("#total-data .pagesize").text(items.length);
      }else{
        $("#total-data .pagesize").text(pager.pagesize);
      }
      $("#total-data .total").text(pager.total);
      $("#paperBar").append('<a class="sp" onclick="setPage('+pager.lastPage+')" href="javascript:void(0)">&gt;</a>');
    //console.dir(data);
    }else{
      //console.dir(data);
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}
</script>
